'use strict';

var React = require('react-native');
var {
    StyleSheet,
    Image,
    ActivityIndicatorIOS,
    Text,
    ListView,
    View
} = React;

var restHost = "http://localhost:8080/baimaozixun/";
var imagePath = "http://img.baimaozixun.com";

var heroListUrl =  restHost + "bmjh/rest/heroes";
var heroAvatarUrl = imagePath + "/hero/avatar/";

var HeroesTab = React.createClass({
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      currentIndex: 0,
      loaded: false,
    };
  },
  componentWillMount: function() {
    // 获取伙伴数据
    console.log("获取伙伴的URL：" + heroListUrl);
    fetch(heroListUrl)
        .then((response) => response.json())
        .then((responseData) => {
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(responseData),
            loaded: true,
          });
          console.log("获得伙伴数量:" + this.state.dataSource.length);
        })
        .done();
  },
  render: function() {
    // 渲染页面
    var contents;
    if (!this.state.loaded) {
      // 当没有list长度为0的时候，先展示"加载中..."
      contents = (
          <View style={ styles.loading }>
            <Text style={ styles.loadingText }>加载中...</Text>
            <ActivityIndicatorIOS />
          </View>
      )
    } else {
      // 渲染伙伴List
      contents = (
          <ListView dataSource={this.state.dataSource} renderRow={this.renderHero} style={styles.listView} />
      )
    }

    return (
        <View style={ styles.container }>
          <View style={ styles.header }>
            <Text style={ styles.headerText }>英雄榜</Text>
          </View>
          { contents }
        </View>
    );
  },
  renderHero: function(hero) {
    // 拼接伙伴头像的url
    var heroAvatarPNG = heroAvatarUrl + hero.picPath + ".png";
    console.log(heroAvatarPNG);
    return (
        <View style={styles.listContainer}>
          <Image source={{uri: heroAvatarPNG}} style={styles.thumbnail} />
          <View style={styles.rightContainer}>
            <Text style={styles.title}>{hero.heroName}</Text>
            <Text >asdfsafdsadf</Text>
          </View>
        </View>
    );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 50,
    backgroundColor: '#1ab394',
    paddingTop: 25,
    alignItems: 'center'
  },
  headerText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold'
  },
  listContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  rightContainer: {
    flex: 1,
    paddingLeft:10,
  },
  thumbnail: {
    width: 70,
    height: 70,
    //resizeMode: Image.resizeMode.contain,
  },
  listView: {
    paddingTop: 5,
    backgroundColor: '#F5FCFF',
    paddingBottom: 30,
  },
  title: {
    fontSize: 15,
    color: '#1ab394',
    textAlign: 'left',
  },
  loading: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  loadingText: {
    fontSize: 14,
    marginBottom: 20
  },

});

module.exports = HeroesTab;